<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <!-- 页面meta -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>体育馆管理系统</title>
  <meta name="description" content="体育馆管理系统">
  <meta name="keywords" content="体育馆管理系统">
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/plugins/elementui/index.css">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/css/login.css">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/js/common.js">
  <script src="<%=request.getContextPath()%>/resources/jquery/jquery.js"></script>
  <script src="<%=request.getContextPath()%>/resources/js/vue.js"></script>
  <script src="<%=request.getContextPath()%>/resources/plugins/elementui/index.js"></script>
  <!-- 引入 echarts.js -->
  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/plugins2/elementui/index.css" />
  <script src="<%=request.getContextPath()%>/resources/plugins2/jquery/dist/jquery.min.js"></script>
  <script src="<%=request.getContextPath()%>/resources/plugins2/healthmobile.js"></script>
  <script src="<%=request.getContextPath()%>/resources/plugins2/vue/vue.js"></script>
  <script src="<%=request.getContextPath()%>/resources/plugins2/vue/axios-0.18.0.js"></script>
  <script src="<%=request.getContextPath()%>/resources/plugins2/elementui/index.js"></script>
  <style scoped>
    body{
      background-image: url("<%=request.getContextPath()%>/resources/img/schoolDoor.jfif");
      /*backdrop-filter: blur(2px);*/
    }
    .login_box{
      width: 450px;
      height: 490px;
      /*background-color: #fff;*/
      border-radius: 18px;
      padding: 30px 50px 30px 30px;
    }
    .login_title{
      text-align: center;
      margin: 30px 30px 40px 30px;
      font-size: 24px;
      color: #666;
    }
    .login_title span{
      margin: 0 20px 0 20px;
      cursor: pointer;
    }
    .login_title span:hover{
      color: #333;
      font-weight: bolder;
    }
    .isActiveTitle{
      color: #333;
      font-weight: bolder;
    }
    .login_agree{
      margin-left: 30px;
    }
    .login_btn{
      width: 100%;
      height: 50px;
      margin: 0 0 0 10px;
      background-color: #0cb95f;
      color: #fff;
    }
  </style>
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div id="app" style="margin:100px auto;width:600px;">
  <div class="login_box">
    <p class="login_title">
      <span :class="isActiveIndex === 0 ? 'isActiveTitle' : ''" @click="accountLogin()">账号登录</span><!-- 利用三元运算符判定点击了哪个登录,从而绑定样式 -->
      <span :class="isActiveIndex === 1 ? 'isActiveTitle' : ''" @click="smsLogin">短信登录</span>
    </p>
    <el-form v-if="isActive" ref="loginForm" :model="loginForm" label-width="80px">
      <el-form-item label="账号：">
        <el-input id="loginID" v-model="loginForm.account" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="密码：">
        <el-input v-model="loginForm.pwd" id="loginPass" type="password"  placeholder="请输入密码" show-password clearable></el-input>
      </el-form-item>
      <p class="login_agree"><el-checkbox id="checkbox1" @change="itemHandleSelectionChange">我已阅读并同意<a>《用户服务协议》</a>、<a>《隐私权政策》</a></el-checkbox></p>
      <el-button class="login_btn" @click="login()">立 即 登 录</el-button>
      <p style="text-align:right;margin-top:10px"><a href="<%=request.getContextPath()%>/login/toFindPass" style="text-decoration:none;color:black">忘记密码？</a></p>
    </el-form>
    <el-form v-else ref="loginForm2" :model="loginForm2" label-width="80px">
      <el-form-item label="手机号：">
        <el-input id="phone" v-model="loginForm2.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="验证码：">
        <el-input v-model="loginForm2.verifyCode" style="width:60%" placeholder="请输入验证码"></el-input>
        <input id="validateCodeButton" @click="sendValidateCode()" type="button" style="font-size: 12px;width:100px;height:30px" value="获取验证码">
      </el-form-item>
      <p class="login_agree"><el-checkbox>我已阅读并同意<a>《用户服务协议》</a>、<a>《隐私权政策》</a></el-checkbox></p>
      <el-button class="login_btn" @click="login2()">立 即 登 录</el-button>
      <p style="text-align:right;margin-top:10px" ><a href="<%=request.getContextPath()%>/login/toFindPass" style="text-decoration:none;color:black">忘记密码？</a></p>
    </el-form>
  </div>

</div>

</body>

<script>
  var vue = new Vue({
    el: '#app',
    data:{
      code:"",//后端传回来的验证码
      isActive: true, // 用于实现切换登录，作为判断
      isActiveIndex: 0,
      loginForm: {
        account:"",
        pwd:"",
      },
      loginForm2: {
        phone: "",
        verifyCode:"",
      },
      isClick:false,
    },
    created() {
    },
    methods: {
      //忘记密码
      retrievePWD(){
        alert("忘记密码");
      },

      //是否勾选协议
      itemHandleSelectionChange(selection) {
        this.isClick = selection;
      },
      accountLogin() { // 账号登录
        this.isActive = true;
        this.isActiveIndex = 0;
      },
      smsLogin() { // 短信登录
        this.isActive = false;
        this.isActiveIndex = 1;
      },
      //发送验证码
      sendValidateCode() {
        var phone = this.loginForm2.phone;
        if (!checkTelephone(phone)) {
          this.$message.error('请输入正确的手机号');
          return false;
        }
        var obj = {};
        obj["phone"] = document.getElementById("phone").value ;
        axios.post("<%=request.getContextPath()%>/sms/findSms.do" , obj).then((response) => {
          console.log(response);
          if(response.data.data === "查无此手机号，请注册"){
            this.$message.error('查无此手机号，请检查手机号是否正确');
          }else{
            if(response.data.success){
              this.$message({
                message: "发送成功请注意查收",
                type: 'success'
              });
              this.code = response.data.data;
              validateCodeButton = $("#validateCodeButton")[0];
              clock = window.setInterval(doLoop, 1000); //一秒执行一次
            }
            else{
              //验证码发送失败
              this.$message.error('验证码发送失败，请检查手机号输入是否正确');
            }
          }

        });
      },
      login(){
        if(this.isClick === false){
          this.$confirm('请勾选《用户服务协议》以及《隐私权政策》', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const el = document.querySelector("#checkbox1");
            el.checked = !el.checked;
          }).catch(() => {
            // 点击取消进行的操作
          })
        }else{
          var obj = {};
          obj["loginID"] = document.getElementById("loginID").value ;
          obj["loginPass"] = document.getElementById("loginPass").value ;
          $.ajax({
            type:"post",
            url:'<%=request.getContextPath()%>/login/login',
            contentType:"application/json",
            data:JSON.stringify(obj),
            success:function (result) {
              console.log(result);

              if (result.success) {
                sessionStorage.setItem("userNo", result.data.data["userNo"]);
                sessionStorage.setItem("username", result.data.data["realName"]);
                if(result.data.data["permissionID"] === 11) {
                  location.href ="<%=request.getContextPath()%>/login/toMain11";
                }else if(result.data.data["permissionID"] === 21 ){
                  location.href ="<%=request.getContextPath()%>/login/toMain21";
                }else if(result.data.data["permissionID"] === 22 ){
                  location.href ="<%=request.getContextPath()%>/login/toMain22";
                }else if(result.data.data["permissionID"] === 23 ){
                  location.href ="<%=request.getContextPath()%>/login/toMain23";
                }else if(result.data.data["permissionID"] === 24 ){
                  location.href ="<%=request.getContextPath()%>/login/toMain24";
                }else if(result.data.data["permissionID"] === 25 ){
                  location.href ="<%=request.getContextPath()%>/login/toMain25";
                }else if(result.data.data["permissionID"] === 31 ){
                  location.href ="<%=request.getContextPath()%>/login/toMain31";
                }else if(result.data.data["permissionID"] === 41 ){
                  location.href ="<%=request.getContextPath()%>/login/toMain41";
                }
              }else {
                alert(result.errMsg);
              }
            }
          });
        }

      },
      login2() {
        //分页参数
        var param = {
          phone:document.getElementById("phone").value,
        };
        //请求后台

        axios.post("<%=request.getContextPath()%>/login/loginPhone",param).then((response)=> {
         console.log(response);
          if (response.data.success && this.code === this.loginForm2.verifyCode && this.loginForm2.phone === response.data.data.data["telephone"]) {
            sessionStorage.setItem("userNo", response.data.data.data["userNo"]);
            sessionStorage.setItem("username", response.data.data.data["realName"]);
            if(response.data.data.data["permissionID"] === 11) {
              location.href ="<%=request.getContextPath()%>/login/toMain11";
            }else if(response.data.data.data["permissionID"] === 21 ){
              location.href ="<%=request.getContextPath()%>/login/toMain21";
            }else if(response.data.data.data["permissionID"] === 22 ){
              location.href ="<%=request.getContextPath()%>/login/toMain22";
            }else if(response.data.data.data["permissionID"] === 23 ){
              location.href ="<%=request.getContextPath()%>/login/toMain23";
            }else if(response.data.data.data["permissionID"] === 24 ){
              location.href ="<%=request.getContextPath()%>/login/toMain24";
            }else if(response.data.data.data["permissionID"] === 25 ){
              location.href ="<%=request.getContextPath()%>/login/toMain25";
            }else if(response.data.data.data["permissionID"] === 31 ){
              location.href ="<%=request.getContextPath()%>/login/toMain31";
            }else if(response.data.data.data["permissionID"] === 41 ){
              location.href ="<%=request.getContextPath()%>/login/toMain41";
            }
          }else {
            alert(response.data.errMsg);
          }
        });
      },
    }
  })
</script>
</html>
